<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
const formData = ref({
  name: '',
  type: '',
  parentType: '',
})
const typeList = ref([
  {
    name: '一级分类',
    value: '2',
    desc: '可设置一级分类“家常菜”',
  },
  {
    name: '二级分类',
    value: '1',
    desc: '“家常菜”下设置二级分类，如“热菜”、“凉菜”',
  },
])
const parentTypeList = ref([
  {
    name: '一级分类1',
    value: '2',
  },
  {
    name: '一级分类2',
    value: '1',
  },
])
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="新建分类" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden p-[10px]"
      :show-scrollbar="false"
    >
      <wd-form :model="formData">
        <custom-wd-input
          required
          focus-highlight
          custom-input-class="text-align-right"
          c-class=""
          label="名称"
          placeholder="例如：热菜、主食"
          placeholder-class="text-align-right"
        />
        <custom-wd-input-single-select
          v-model="formData.type"
          :list="typeList"
          required
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="类型"
          placeholder="请选择"
          title="请选择类型"
          placeholder-class="text-align-right"
        />
        <custom-wd-input-single-select
          v-if="formData.type === '1'"
          v-model="formData.parentType"
          :list="parentTypeList"
          required
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="所属一级分类"
          placeholder="请选择"
          placeholder-class="text-align-right"
        />
        <wd-cell title="图片" class="mt-3 rounded-lg" label="在手机点餐、平板点餐的点餐界面展示">
          <image-picker-normal class="inline-block" />
        </wd-cell>
        <wd-cell title="图片(未选中状态)" class="mt-3 rounded-lg" label="仅手机点餐展示">
          <image-picker-normal class="inline-block" />
        </wd-cell>
        <wd-cell title="手机点餐端展示" class="mt-3 rounded-lg" center>
          <wd-switch size="20px" />
        </wd-cell>
        <view class="mx-[10px] mt-6">
          <wd-text text="其他" bold size="16px" color="#333" />
        </view>
        <custom-wd-input
          custom-input-class="text-align-right"
          c-class="mt-3"
          label="数字速记码"
          placeholder="请输入1-5位数字"
          placeholder-class="text-align-right"
        />
        <wd-cell title="高级设置" class="mt-3 rounded-lg" label="出品部门、预估成本、保质期" center>
          <wd-text text="去设置" color="#bfbfbf">
            <template #suffix>
              <wd-icon name="chevron-right" color="#bfbfbf" size="16" />
            </template>
          </wd-text>
        </wd-cell>
      </wd-form>
    </scroll-view>
    <view class="flex items-center bg-white p-2">
      <wd-button
        class="flex-1 !border-1 !border-border !border-solid !text-primary"
        type="info"
        :round="false"
      >
        保存并继续添加
      </wd-button>
      <wd-button class="ml-2 flex-1" type="primary" :round="false">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
